<template>
  <div id="customer-login-info">
    <div class="card">
      <div class="card-body">
        <button @click.stop="search()" class="btn btn-sm btn-info">刷新</button>
      </div>
      <table class="table table-sm" v-if="loginInfo !== null">
        <thead>
          <tr>
            <th>用户名</th>
            <th>姓名</th>
            <th class="d-none d-md-block">部门</th>
            <th class="d-none d-md-block">职位</th>
            <th class="d-none d-md-block">Email</th>
            <th class="d-none d-md-block">手机</th>
            <th>密码</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="info of userInfos" :key="`username_` + info.id">
            <td>
              <span v-if="!info.temporaryUsername">{{ info.username }}</span>
              <a
                href="javascript:void(0)"
                @click.stop="updateUserUsername(info.username, info.id)"
                class=""
                v-if="isAdmin && info.temporaryUsername"
                >修改</a
              >
            </td>

            <td>{{ info.empname }}</td>
            <td class="d-none d-md-block">{{ info.departmentName }}</td>
            <td class="d-none d-md-block">{{ info.positionName }}</td>
            <td class="d-none d-md-block">
              {{ info.email }}
              <a
                href="javascript:void(0)"
                @click.stop="
                  updateUserEmail(info.username, info.email, info.id)
                "
                class="ms-2"
                v-if="isAdmin"
                >修改</a
              >
            </td>
            <td class="d-none d-md-block">
              {{ info.mobile }}
              <a
                href="javascript:void(0)"
                @click.stop="
                  updateUserMobile(info.username, info.mobile, info.id)
                "
                class="ms-2"
                v-if="isAdmin"
                >修改</a
              >
            </td>
            <td>
              <a
                href="javascript:void(0)"
                @click.stop="resetPassword(info.username, info.id)"
                class="small text-warning"
                v-if="isAdmin && info.status === 1"
                >重置</a
              >
            </td>
            <td>
              <div class="form-check form-switch">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="flexSwitchCheckDefault"
                  :checked="info.status === 1"
                  @click.stop="switchUser($event.target, info.id)"
                  :disabled="!isAdmin"
                />
                <label class="form-check-label" for="flexSwitchCheckDefault">
                  {{ showLoginUsernameStatus(info.status) }}
                </label>

                <router-link :to="`/admin/member/` + info.id">
                  <i class="mdi mdi-arrow-right float-end"></i>
                </router-link>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="card-body">
        <strong>企业客户:</strong>
        <span class="text-danger">
          可以查看本公司的订单和账单，以及报表分析。
        </span>
        <br />
        <strong>企业散客:</strong>
        <span class="text-info">可以查看本公司的订单。</span>
      </div>
    </div>
    <my-modal-prompt ref="modalPrompt">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
  </div>
</template>

<script>
import {
  resetUserPassword,
  updateUserUsername,
  updateUserEmail,
  updateUserMobile,
  updateUserEtermUsername,
  disableUser,
  enableUser,
} from "@/api/admin.js";
import { searchCustomerLoginInfos } from "@/api/customer.js";

import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";

export default {
  props: {
    customerId: {
      type: Number,
    },
    passengerId: {
      type: Number,
    },
    loginInfo: {
      type: Object,
    },
    count: {
      type: Number,
    },
  },
  components: {
    MyModalPrompt,
  },
  data() {
    return {
      modalTitle: "",

      userInfos: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    // console.log(this.loginInfo)
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    search: function () {
      if (this.customerId < 1) {
        return;
      }
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 100,
        "sc.passengerId": this.passengerId,
      };
      searchCustomerLoginInfos(this.customerId, params, (v) => {
        // console.log(v)
        this.userInfos = v.dataList;

        this.$emit("update:count", v.dataList.length);
      });
    },
    showLoginUsernameStatus: function (val) {
      if (val === 1) {
        return "已启用";
      } else if (val === 0) {
        return "未启用";
      } else if (val === 4) {
        return "已禁用";
      } else {
        return val;
      }
    },
    resetPassword: function (username, userId) {
      // const username = this.loginInfo.username
      // const userId = this.loginInfo.id

      this.modalTitle = "重置用户(" + username + ")密码, 请输入新密码";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            password: remark,
          };
          resetUserPassword(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    updateUserUsername: function (username, userId) {
      this.modalTitle = "更改用户(" + username + ")的用户名, 请输入新用户名";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            username: remark,
          };
          updateUserUsername(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    updateUserEmail: function (username, email, userId) {
      this.modalTitle = "更改用户(" + username + ")的email为:";

      this.$refs.modalPrompt
        .modal(email)
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            email: remark,
          };
          updateUserEmail(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    updateUserMobile: function (username, mobile, userId) {
      this.modalTitle = "更改用户(" + username + ")的手机号为:";

      this.$refs.modalPrompt
        .modal(mobile)
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            mobile: remark,
          };
          updateUserMobile(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    updateUserEtermUsername: function () {
      const etermUsername = this.loginInfo.etermUsername;
      const userId = this.loginInfo.id;

      this.modalTitle = "更改eterm用户名, 多个用逗号（单角）分隔:";

      this.$refs.modalPrompt
        .modal(etermUsername)
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            etermUsername: remark,
          };
          updateUserEtermUsername(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    disableUser: function (userId) {
      const params = {
        id: userId,
      };
      disableUser(
        params,
        (v) => this.commonShowMessage(v),
        () => {
          this.hideLoading();
        }
      );
    },
    enableUser: function (userId) {
      const params = {
        id: userId,
      };
      enableUser(
        params,
        (v) => this.commonShowMessage(v),
        () => {
          this.hideLoading();
        }
      );
    },
    switchUser: function (checkbox, userId) {
      console.log(userId);
      console.log(checkbox);
      console.log(checkbox.checked);
      if (checkbox.checked) {
        this.enableUser(userId);
      } else {
        this.disableUser(userId);
      }
    },
    commonShowMessage: function (v) {
      if (v.status === "OK") {
        this.showErrMsg("操作成功");
        this.search();
      } else {
        this.showErrMsg("操作失败: " + v.errmsg);
      }
    },
  },
};
</script>